/**
 * 模拟动态进度条组件
 * @author SPY
 * @description 用于动态载入js插件库
 * @date 2019/11/21
 */

import React from 'react';
import { Progress, Card, Row, Col } from 'antd';
import PropTypes from 'prop-types';
import Texty from 'rc-texty';
import 'rc-texty/assets/index.css';

class TextProgress extends React.Component {

    static propTypes = {
        showText: PropTypes.string,  // 进度条下面的展示文本
        showStatus: PropTypes.bool, // 是否显示文本
        percent: PropTypes.number,  // 进度条的进度
        status: PropTypes.string,   // 进度条的状态
    }

    static defaultProps = {
        showStatus: true,
        showText: '文件正在下载中...',
        percent: 0,
        status: "active",
    }

    render() {
        const { showStatus, showText, percent, status } = this.props;
        return (
            <Row type='flex' justify='center' align='middle'>
                <Col span={10} style={{ marginTop: '3%',marginBottom:'3%' }}>
                    <Card
                        style={{ borderRadius: 15, textAlign: 'center', height: 80, borderTop: '1px solid #e8e8e8' }}
                    >
                        <div>
                            <Progress
                                status={status}
                                percent={percent}
                                strokeWidth={15}
                            // strokeColor={{ from: '#1890ff', to: 'blue' }}
                            />
                        </div>
                        <div>
                            <Texty type='scale' mode='smooth'>
                                {showStatus && showText}
                            </Texty>
                        </div>
                    </Card>
                </Col>
            </Row>
        )
    }
}

export default TextProgress;